<template>
    <div class="goodsList_container">
      <div class="header">
        <!--面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-card>
        <el-row :gutter="0">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" clearable @clear="getGoodsList" v-model="queryInfo.query">
              <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
            </el-input>
          </div></el-col>
          <el-col :span="3"><div class="grid-content bg-purple">
            <el-button type="primary" @click="goAddGoodsPage">添加商品</el-button>
          </div></el-col>
        </el-row>

        <!--商品列表-->
        <el-table :data="goodsList" style="width: 100%" border stripe>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="商品名称" prop="goods_name"></el-table-column>
          <el-table-column label="商品价格" prop="goods_price" width="100"></el-table-column>
          <el-table-column label="商品重量" prop="goods_weight" width="100"></el-table-column>
          <el-table-column label="创建时间" width="150">
            <template slot-scope="scope">
              {{scope.row.add_time|dataFormat}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="150">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content=" 删除 " placement="top" :enterable="false">
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteGoods(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!--分页插件-->
        <el-pagination background layout="total,sizes,prev, pager, next" align="left" :page-size="queryInfo.pagesize" :total="total"
                       @current-change="pagenumChange" :current-page="queryInfo.pagenum" @size-change="handleSizeChange" :page-sizes="[5,10,15,30,60,120,240,480]">
        </el-pagination>
      </el-card>
    </div>
</template>

<script>
  import connector from '../../base/interface.js';
    export default {
        name: "List",
      data(){
        return{
          /*获取商品列表的参数,query:查询参数,pagenum:当前页,pagesize:每页显示多少条*/
          queryInfo:{query:'',pagenum:1,pagesize:5},
          goodsList:[],
          /*商品列表的总条数*/
          total:0
        }
      },
      methods:{
        getGoodsList(){
          /*获取商品列表*/
          connector.getGoodsList(this.queryInfo).then(res=>{
            var {data:data}=res;
            this.goodsList=data.data.goods;
            this.total=data.data.total;
          })
        },
        handleSizeChange(pageSize){
          /*分页插件的pageSize改变触发*/
          this.queryInfo.pagesize=pageSize;
          this.getGoodsList();
        },
        pagenumChange(page){
          /*分页插件的pagenum改变触*/
          this.queryInfo.pagenum=page;
          this.getGoodsList();
        },
        goAddGoodsPage(){
          this.$router.push('goods/add');

        },
        deleteGoods(row){
          /*删除商品触发*/
          this.$confirm('此操作将删除该商品, 是否继续?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
          }).then(() => {
            connector.deleteGoodsById(row.goods_id).then(res=>{
              /*删除成功*/
              var {data:data}=res;
              this.$message({message:data.meta.msg,type:'success'});
              this.getGoodsList();
            })
          });
        }

      },
      created() {
        this.getGoodsList();
      }
    }
</script>

<style lang="scss" scoped>

</style>
